<!doctype html>
<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTMLImports Path Tests</title>
  <script src="../../tools/htmltest.js"></script>
  <script src="../../tools/chai/chai.js"></script>
  <script src="../../../src/HTMLImports/HTMLImports.js"></script>
  <link rel="import" href="imports/style-paths-import.html">
</head>
<body>
  <div class="red">red</div>
  <div class="image" style="height: 20px;"></div>
  <div style="font-family: 'Source Code Pro'">Source Code Pro</div>
  <script>

  document.addEventListener('HTMLImportsLoaded', function() {
    // NOTE: IE requires asynchrony here
    setTimeout(function() {
      var i = document.querySelector('[rel=import]');
      var doc = i.import;

      var red = document.querySelector('.red');
      chai.assert.equal(getComputedStyle(red).backgroundColor, 'rgb(255, 0, 0)', 'style in @import applied');
      var image = document.querySelector('.image');

      // document relative image url
      var a = document.createElement('a');
      a.href = 'imports/google.png';
      chai.assert.match(getComputedStyle(image).backgroundImage, new RegExp(a.href), 'url in style applied');

      if (!HTMLImports.useNative) {
        var style = document.querySelector('style');
        chai.assert.ok(style.sheet);
        chai.assert.equal(style.sheet.cssRules[2].href,
            'http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,800|Source+Code+Pro',
            '@import url() form rule has proper url')
      }

      done();
    });
  });
  </script>
</body>
</html>
